<!-- src/views/index.vue -->
<template>
    <div class="app-container">
        <el-tabs class="esc" type="card" v-model="activeName">
            <el-tab-pane label="历程信息" name="first">
                <el-container class="lcmes">
                    <el-main>

                        <el-card class="box-card">
                            <div slot="header" class="clearfix headBox">
                                <div class="headTit">
                                    <h1 class="title">标题设置</h1>

                                    <input class="inpsss" placeholder="请输入标题" />


                                </div>

                            </div>
                            <div class="contBox">
                                <h1>编辑内容</h1>
                                <el-input type="textarea" :rows="7" class="txts" placeholder="请输入内容">
                                </el-input>
                                <el-row>
                                    <el-button plain class="yl">预览</el-button>
                                    <el-button plain class="sm" @click="btnlist">提交</el-button>
                                </el-row>
                            </div>
                        </el-card>
                    </el-main>
                </el-container>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
import { getArr } from '../../../src/request/api/getArr'
import { postArr } from '../../../src/request/api/postArr'

export default {
    data() {
        return {
            arr: [],
            input: "",
            name: "Index",
            radio: "1",
            imageUrl: "",
            textarea: "",
            activeName: "first",

            topName: '',
            bottonName: '',



            tableData: [
                {
                    number: "2016-05-02",
                    image: "王小虎",
                    date: "上海市普陀区金沙江路 1518 弄",
                    txt: "墨西哥总统辛鲍姆表示所谓中国产",
                    production: "",
                    dos: "",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄",
                },
            ],
        };
    },
    methods: {
        async btnlist() {


            console.log('1111');




        },
        async getlist() {
            let res = await getArr('/admin/about-us/getAboutUs')
            // console.log('get', res);
            this.arr = res.data.data
            console.log('arrr', this.arr);

        },
        async postlist() {
            let res = await postArr('/admin/about-us/updateAboutUs', {
                "content": '    ',
                "createBy": "",
                "createTime": "",
                "headline": "",
                "id": 0,
                "isDelete": 0,
                "updateBy": '',
                "updateTime": ""
            })

            console.log('post', res);

        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
    },
    created() {
        this.getlist()
        this.postlist()
    }
};
</script>

<style lang="scss" scoped>
:deep .el-main[data-v-7eb2bc79] {
    padding-top: 0 !important;
    line-height: 0 !important;
}

* {
    padding: 0;
    margin: 0;
}

.app-container {
    height: 100vh;
    /* 使容器高度占满整个视口 */

    .lcmes {
        height: 100%;
        display: block;

        .headBox {
            display: flex;
            justify-content: space-between;

            // height: 160px;
            // line-height: 60px;
            .headTit {
                width: 40%;
                text-align: left;
                padding: 20px 0;





                h1 {
                    height: 40px;
                    line-height: 40px;
                    font-size: 18px;
                    color: #2c3d5c;
                    margin: 0 0 20px 0;
                }

                input {
                    width: 450px;
                    outline: none;
                    border: 1px solid #eceef5;
                    background-color: #f6f8fb;
                    padding-left: 10px;
                    height: 70px;
                }
            }


        }

        .contBox {
            width: 100%;
            height: 100%;
            text-align: left;

            h1 {
                font-size: 18px;
                color: #2c3d5c;
                margin: 20px 0 30px 0;
            }

            .txts {
                height: 250px;
            }

            .el-textarea__inner {
                z-index: 999;
                height: 230px;
            }

            .el-textarea {
                // height: 300px;
                margin-bottom: 80px;
            }

            .el-row {
                margin-bottom: 300px;
                width: 100%;
                display: flex;
                justify-content: center;
            }
        }
    }


}

:deep .el-tabs__item {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #fff;
    margin-right: 20px;
}

:deep .el-tabs__item.is-active {
    background-color: #2567ff;
    color: #fff;
}

> :deep .el-tabs__header {
    margin: 0 !important;
    // padding-left: 20px;
    box-sizing: border-box;
    width: 1670px;
    // height: 60px;
    margin-left: 20px;
    border-bottom: 0 !important;
}

:deep .el-textarea__inner {
    background-color: #f6f8fb;
}

.yl {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-right: 25px;
}

.sm {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    background-color: #2567ff;
}
</style>